<template>
  <div>
    <div style="overflow-x: scroll; overflow-y: hidden;">
      <VisGridLayout :layout="layout" :static="static" ref="layoutRef" :width="screenWidthFull ? '100%':'1920px'" @moveEvent="moveEvent" @resizeEvent="resizeEvent" @dele="dele"></VisGridLayout>
    </div>
    <div class="tools">
        <a-button type="primary" @click="static = !static">{{static ? '编辑':'退出编辑'}}</a-button>
        <a-button type="primary" @click="add">添加</a-button>
        <a-button type="primary" @click="screenChange()">{{screenWidthFull ? '固定宽度':'自适应宽度'}}</a-button>
    </div>
    <a-input type="textarea" :value="value" :rows="4" @change="layoutChange" />
    <br><br>
    {{layout}}
  </div>
</template>

<script>
import Head1 from "@/views/comps/components/head1";
import Box1 from '@/views/comps/components/box1'

export default {
  components: {
    Head1,
    Box1,
  },
  props: {},
  data() {
    return {
      static: false,
      layout: [

      ],
      value: '',
      screenWidthFull: false, 
    };
  },
  methods: {
    add() {
      this.$refs.layoutRef.add()
      this.value = JSON.stringify(this.layout)
    },
    layoutChange(e) {
      console.log('e');
      this.value = e.target.value
      this.layout = JSON.parse(e.target.value)
    },
    screenChange() {
      this.screenWidthFull = !this.screenWidthFull
    },
    moveEvent() {;
      this.value = JSON.stringify(this.layout)
    },
    resizeEvent() {
      this.value = JSON.stringify(this.layout)
    },
    dele() {
      this.value = JSON.stringify(this.layout)
    }
  },
};
</script>

<style lang="less" scoped>
.tools{
    padding: 10px 0;
    text-align: center;

    .ant-btn + .ant-btn {
        margin-left: 10px;
    }
}

.vue-grid-layout {
  background: url('~@/assets/images/background/vis_bg2.png') no-repeat center !important;
}
</style>